import { SystemFonts } from '@/util/BrowserUtil'
import { Col, ColorPicker, InputNumber, Row, Select, Space } from 'antd'
import fontSizeOutlined from '@iconify/icons-ant-design/font-size-outlined'
import { Icon } from '@iconify/react/dist/iconify.js'
import alignLeftOutlined from '@iconify/icons-ant-design/align-left-outlined'
import alignCenterOutlined from '@iconify/icons-ant-design/align-center-outlined'
import alignRightOutlined from '@iconify/icons-ant-design/align-right-outlined'
import boldOutlined from '@iconify/icons-ant-design/bold-outlined'
import italicOutlined from '@iconify/icons-ant-design/italic-outlined'
import underlineOutlined from '@iconify/icons-ant-design/underline-outlined'
import IconButton from '@/components/Icon'
import verticalAlignTopOutlined from '@iconify/icons-ant-design/vertical-align-top-outlined'
import verticalAlignMiddleOutlined from '@iconify/icons-ant-design/vertical-align-middle-outlined'
import verticalAlignBottomOutlined from '@iconify/icons-ant-design/vertical-align-bottom-outlined'
import { useEffect, useState } from 'react'
import EditorExecutor from '@/executor/EditorExecutor'
import { mxCell } from 'mxgraph'
import { PropsBarState } from '@/types/index'

const FontFamilyOptions = SystemFonts.map((font: string) => {
  return {
    label: font,
    value: font
  }
})

interface ITextSettingProps {
  cells?: mxCell[]
  cellState: PropsBarState
}
export default function TextSetting(props: ITextSettingProps) {
  const [fontFamily, setFontFamily] = useState('')
  const [fontSize, setFontSize] = useState('11')
  // 字体颜色
  const [fontColor, setFontColor] = useState('#000000')
  // 是否为粗体
  const [isBold, setIsBold] = useState(false)
  // 是否为斜体
  const [isItalic, setIsItalic] = useState(false)
  // 是否有下划线
  const [isUnderline, setIsUnderline] = useState(false)
  // 垂直对齐方式
  const [verticalAlign, setVerticalAlign] = useState('middle')
  // 水平对齐方式
  const [horizontalAlign, setHorizontalAlign] = useState('center')

  useEffect(() => {
    const { style } = props.cellState
    if (style && style.fontFamily) {
      setFontFamily(style.fontFamily)
    }
    if (style && style.fontSize) {
      setFontSize(style.fontSize)
    }
    if (style && style.fontColor) {
      setFontColor(style.fontColor)
    }
    const fontStyle = mxUtils.getValue(style, mxConstants.STYLE_FONTSTYLE, 0)
    setIsBold((fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD)
    setIsItalic((fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC)
    setIsUnderline((fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE)

    const align = mxUtils.getValue(style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER)
    setHorizontalAlign(align)

    const valign = mxUtils.getValue(
      style,
      mxConstants.STYLE_VERTICAL_ALIGN,
      mxConstants.ALIGN_MIDDLE
    )
    setVerticalAlign(valign)
  }, [props.cellState])

  return (
    <Space direction="vertical" size="small" style={{ display: 'flex' }}>
      <Row>
        <Col span={10} className="label">
          文本
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={18}>
          <Select
            options={FontFamilyOptions}
            value={fontFamily}
            defaultActiveFirstOption={true}
            className="h-26px w-100% font-size-12px"
            onChange={(value: string) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_FONTFAMILY, value)
            }}
          />
        </Col>
        <Col span={6}>
          <ColorPicker
            value={fontColor}
            onChangeComplete={(c) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_FONTCOLOR, c.toHexString())
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={12}>
          <InputNumber
            size="small"
            addonBefore={<Icon icon={fontSizeOutlined} fontSize={16} />}
            className="h-26px w-100% font-size-12px"
            formatter={(value) => `${value}pt`}
            parser={(value) => value!.replace('pt', '')}
            value={fontSize}
            onChange={(value) => {
              if (value != null) {
                setFontSize(value)
              }
            }}
            onStep={(value) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_FONTSIZE, value)
            }}
            onPressEnter={(e) => {
              EditorExecutor.setCellStyles(mxConstants.STYLE_FONTSIZE, fontSize)
            }}
          />
        </Col>
        <Col span={12} className="flex flex-justify-between  bg-#ffffff">
          <IconButton
            icon={boldOutlined}
            tip="加粗"
            className="h-24px w-24px"
            fontSize={18}
            checked={isBold}
            onClick={() => {
              setIsBold(!isBold)
              EditorExecutor.toggleCellStyleFlags(
                mxConstants.STYLE_FONTSTYLE,
                mxConstants.FONT_BOLD
              )
            }}
          />
          <IconButton
            icon={italicOutlined}
            tip="斜体"
            className="h-24px w-24px "
            fontSize={18}
            checked={isItalic}
            onClick={() => {
              setIsItalic(!isItalic)
              EditorExecutor.toggleCellStyleFlags(
                mxConstants.STYLE_FONTSTYLE,
                mxConstants.FONT_ITALIC
              )
            }}
          />
          <IconButton
            icon={underlineOutlined}
            tip="下划线"
            className="h-24px w-24px"
            fontSize={18}
            checked={isUnderline}
            onClick={() => {
              setIsUnderline(!isUnderline)
              EditorExecutor.toggleCellStyleFlags(
                mxConstants.STYLE_FONTSTYLE,
                mxConstants.FONT_UNDERLINE
              )
            }}
          />
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={12} className="flex flex-justify-between  bg-#ffffff ">
          <IconButton
            icon={alignLeftOutlined}
            tip="左对齐"
            className="h-24px w-24px"
            fontSize={18}
            checked={horizontalAlign == mxConstants.ALIGN_LEFT}
            onClick={() => {
              setHorizontalAlign(mxConstants.ALIGN_LEFT)
              EditorExecutor.setCellStyles(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT)
            }}
          />
          <IconButton
            icon={alignCenterOutlined}
            tip="居中对齐"
            className="h-24px w-24px"
            fontSize={18}
            checked={horizontalAlign == mxConstants.ALIGN_CENTER}
            onClick={() => {
              setHorizontalAlign(mxConstants.ALIGN_CENTER)
              EditorExecutor.setCellStyles(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER)
            }}
          />
          <IconButton
            icon={alignRightOutlined}
            tip="右对齐"
            className="h-24px w-24px "
            fontSize={18}
            checked={horizontalAlign == mxConstants.ALIGN_RIGHT}
            onClick={() => {
              setHorizontalAlign(mxConstants.ALIGN_RIGHT)
              EditorExecutor.setCellStyles(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_RIGHT)
            }}
          />
        </Col>
        <Col span={12} className="flex flex-justify-between  bg-#ffffff ">
          <IconButton
            icon={verticalAlignTopOutlined}
            tip="顶部对齐"
            className="h-24px w-24px"
            fontSize={18}
            checked={verticalAlign == mxConstants.ALIGN_TOP}
            onClick={() => {
              setVerticalAlign(mxConstants.ALIGN_TOP)
              EditorExecutor.setCellStyles(mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_TOP)
            }}
          />
          <IconButton
            icon={verticalAlignMiddleOutlined}
            tip="居中对齐"
            className="h-24px w-24px "
            fontSize={18}
            checked={verticalAlign == mxConstants.ALIGN_MIDDLE}
            onClick={() => {
              setVerticalAlign(mxConstants.ALIGN_MIDDLE)
              EditorExecutor.setCellStyles(
                mxConstants.STYLE_VERTICAL_ALIGN,
                mxConstants.ALIGN_MIDDLE
              )
            }}
          />
          <IconButton
            icon={verticalAlignBottomOutlined}
            tip="底部对齐"
            className="h-24px w-24px "
            fontSize={18}
            checked={verticalAlign == mxConstants.ALIGN_BOTTOM}
            onClick={() => {
              setVerticalAlign(mxConstants.ALIGN_BOTTOM)
              EditorExecutor.setCellStyles(
                mxConstants.STYLE_VERTICAL_ALIGN,
                mxConstants.ALIGN_BOTTOM
              )
            }}
          />
        </Col>
      </Row>
    </Space>
  )
}
